<script lang="ts" setup>
import {onMounted, ref} from "vue";

const props = withDefaults(defineProps<{
  msg: string
  color?: string
  type?: 'success' | 'error' | 'warning' | 'info'
  duration?: number
  icon?: string // colorUi图标
  direction?: 'top' | 'bottom'|'center'
}>(), {
  color: '#fff',
  type: 'success',
  duration: 2000,
  direction: 'top'
});
const showMessage = ref(true)
const showAnimation = ref(false)
onMounted(() => {
  setTimeout(() => {
    showMessage.value = false
  }, props.duration)
  setTimeout(() => {
    showAnimation.value = true
  }, props.duration - 500)
})

/**
 * @description: 修改图标
 */
const checkTypeIcon = () => {
  if (props.icon) {
    return props.icon
  }
  switch (props.type) {
    case 'success':
      return 'cuIcon-roundcheck'
    case 'error':
      return 'cuIcon-roundclose'
    case 'warning':
      return 'cuIcon-warn'
    case 'info':
      return 'cuIcon-info'
  }
}
</script>

<template>
  <view v-if="showMessage" :class="[showAnimation?'scale-out-center':'scale-in-center',type,direction ]"
        :style="{backgroundColor: color}" class="aw-message cu-btn round ">
    <text style="white-space: nowrap">{{ msg }}</text>
    <text :class="[checkTypeIcon()]" style="font-size: 21px"></text>
  </view>
</template>

<style lang="scss" scoped>
.aw-message {
  box-shadow: 0 0 30rpx 0 rgba(0, 0, 0, .3);
  z-index: 9999;
  position: fixed;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  font-size: 14px;
  line-height: 1.5;
}

.scale-in-center {
  animation: scale-in-center 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes scale-in-center {
  0% {
    transform: translate(-50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%) scale(1);
    opacity: 1;
  }
}

.scale-out-center {
  animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes scale-out-center {
  0% {
    transform: translate(-50%,) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%) scale(0);
    opacity: 1;
  }
}


.success {
  background-color: #EBF9F8;
  color: #39c5bb;
}

.info {
  background-color: #F4F4F5;
  color: #909399;
}

.error {
  background-color: #FEF0F0;
  color: #F56C6C;
}

.warning {
  background-color: #FFF6E6;
  color: #E6A23C;
}

.top{
  top: 10%;
}
.center{
  top: 40%;
}
.bottom{
  top: 80%;
}
</style>